<template>
    <Category :scene="scene"></Category>
    <el-card shadow="hover" :body-style="{ padding: '20px' }">
        <div v-show="scene==0">
            <el-button type="primary" size="default" :icon="Plus" @click="addSpu">添加SPU</el-button>
            <el-table border stripe style="margin:10px 0px" :data="spuList.records">
                <el-table-column label="序号" type="index" width="80px">
                </el-table-column>
                <el-table-column label="SPU名称" sortable prop="spuName" show-overflow-tooltip resizable>
                </el-table-column>
                <el-table-column label="SPU描述" prop="description" show-overflow-tooltip resizable>
                </el-table-column>
                <el-table-column label="操作">
                    <template v-slot="{row,$index}">
                        <el-button type="primary" size="small" title="添加SKU" @click="addSku(row)" :icon="Plus">
                        </el-button>
                        <el-button type="warning" @click='updateSpu(row)' size="small" title="修改SPU" :icon="Edit">
                        </el-button>
                        <el-button type="info" size="small" title="查看SKU" :icon="InfoFilled" @click="showDialog(row)">
                        </el-button>
                        <el-button type="danger" size="small" title="删除SPU" :icon="Delete" @click="delSpu(row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @current-change="getspuList" @size-change="sizeHandler" v-model:current-page="currentPage"
                :page-sizes="[3, 5, 7]" v-model:page-size="pageSize" layout=" prev, pager, next, jumper,->,sizes,total "
                :total="spuList.total" background :pager-count="7">
            </el-pagination>
        </div>
        <Spu v-show="scene==1" @changeScene="changeSceneHandler" ref="spuRef"></Spu>
        <Sku v-show="scene==2" @changeScene="changeSceneHandler" ref="skuRef"></Sku>
        <!--展示SKU的对话框-->
        <el-dialog v-model="dialogTableVisible" title="查看SKU列表">
            <el-table :data="skuList">
                <el-table-column prop="skuName" label="名称" width="150" />
                <el-table-column property="price" label="价格" width="200" />
                <el-table-column property="weight" label="重量" />
                <el-table-column label="默认图片">
                    <template #="{ row, $index }">
                        <img :src="row.skuDefaultImg" alt="" style="width: 100px; height: 100px" />
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </el-card>

</template>

<script setup lang="ts">
import {
    Check,
    Delete,
    Edit,
    Message,
    Search,
    Star,
    Plus,
    InfoFilled
} from '@element-plus/icons-vue'
import { ref, watch } from 'vue'
import { reqSpuList, reqFindSkuList,reqDeleteSpu } from '@/api/product/spu/spu'
import usecategoryStore from '@/stores/category'

//引入两个子组件
import Spu from "./addOrUpdateSpu.vue";
import Sku from "./addSku.vue";
import { ElMessage } from 'element-plus'
let categoryStore = usecategoryStore()
let scene = ref<number>(0)
// 获取子组件实例
let spuRef = ref<any>()
let skuRef = ref<any>()
let currentPage = ref<number>(1)
let pageSize = ref<number>(3)
// sku显示与隐藏
let dialogTableVisible = ref(false)
//准备响应式对象：存储服务器返回的数据
let spuList = ref({})
let skuList=ref([])
// 监听是否有3id
watch(() => categoryStore.c3Id, () => {
    if (categoryStore.c3Id == '') return
    getspuList(1)
})
const getspuList = async (pager: number = 1) => {
    currentPage.value = pager
    let result = await reqSpuList(currentPage.value,
        pageSize.value,
        categoryStore.c3Id)
    spuList.value = result
}
const sizeHandler = (limit: number) => {
    pageSize.value == limit
    getspuList()
}
// 添加spu
const addSpu = () => {
    scene.value = 1;
    spuRef.value.initAddSpu(categoryStore.c3Id)
}
// 添加sku
const addSku = (sku) => {
    scene.value = 2;
    skuRef.value.initattr(categoryStore.c1Id, categoryStore.c2Id, sku)
}
// 修改spu
//更新SPU按钮回调
const updateSpu = (hasSpu) => {
    scene.value = 1;
    spuRef.value.initHasSpuData(hasSpu)
}
const changeSceneHandler = ({ scenes, flag }) => {
    //修改场景
    scene.value = scenes;
    if (flag == 'add') {
        //再次获取最新全部SPU的数据
        getspuList();
    } else {
        //当前是修改
        getspuList(currentPage.value);
    }
}
// 查看sku
const showDialog = async (row: any) => {
    dialogTableVisible.value = true
    skuList.value= await reqFindSkuList(row.id)
}
// 删除spu
const delSpu=async(row)=>{
  try{
    await reqDeleteSpu(row.id)
    getspuList()
    ElMessage({
            type: "success",
            message: "删除成功",
        });
  }catch(error){
    ElMessage({
            type: "error",
            message: "删除失败",
        });
  }
}
</script>

<style scoped>

</style>